<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="com.zy.entity.Order" %>
<html>
<head>
    <title>订单详情</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
        }
        .order-table {
            width: 80%;
            margin: 50px auto;
            border-collapse: collapse;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }
        .order-table th, .order-table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        .order-table th {
            background-color: #3f51b5;
            color: white;
        }
        .order-table tr:hover {
            background-color: #f1f1f1;
        }
        .star-rating {
            display: inline-block;
        }
        .star {
            font-size: 20px;
            color: #ccc;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        .star.selected {
            color: #ffcc00;
        }
        .star:hover,
        .star:hover ~ .star {
            color: #ffcc00;
        }
    </style>
</head>
<body>
    <table class="order-table">
        <thead>
            <tr>
                <th>订单ID</th>
                <th>支付金额</th>
                <th>支付时间</th>
                <th>星级评价</th>
            </tr>
        </thead>
        <tbody>
            <% List<Order> orders = (List<Order>) request.getAttribute("orders"); %>
            <% if (orders != null) { %>
                <% for (Order order : orders) { %>
                    <tr>
                        <td><%= order.getId() %></td>
                        <td>¥<%= order.getPaymentAmount() %></td>
                        <td><%= order.getPaymentTime() %></td>
                        <td>
                            <div class="star-rating" data-order-id="<%= order.getId() %>">
                                <span class="star" data-value="1">★</span>
                                <span class="star" data-value="2">★</span>
                                <span class="star" data-value="3">★</span>
                                <span class="star" data-value="4">★</span>
                                <span class="star" data-value="5">★</span>
                            </div>
                        </td>
                    </tr>
                <% } %>
            <% } else { %>
                <tr>
                    <td colspan="3">没有订单记录</td>
                </tr>
            <% } %>
        </tbody>
    </table>
    <script>
        document.querySelectorAll('.star-rating').forEach(rating => {
            rating.addEventListener('click', function(e) {
                if (e.target.classList.contains('star')) {
                    const stars = this.querySelectorAll('.star');
                    const value = e.target.getAttribute('data-value');
                    stars.forEach(star => {
                        star.classList.remove('selected');
                    });
                    for (let i = 0; i < value; i++) {
                        stars[i].classList.add('selected');
                    }
                    alert('订单ID: ' + this.getAttribute('data-order-id') + ' 的评分为: ' + value + ' 星');
                }
            });
        });
    </script>
</body>
</html>
